import { useRecoilState } from "recoil";
import { todoListState } from "../store"
import styles from "../css/TodoItem.module.css";

interface Item {
  content: string;
  isCompleted: boolean;
  time: string;
}

interface ItemProps {
  item: Item;
}

function TodoItem({ item }: ItemProps) {

  // 获取待办事项列表状态
  const [todolist, setTodoList] = useRecoilState(todoListState);


  // 寻找对应项目的下标
  // 接收一个参数，参数是待办事项的内容
  const findItemIndex = (content: string) => {
    return todolist.findIndex((it) => it.content === content);
  }


  // 删除按钮对应的回调
  const closeHandler = (item: Item) => {
    // 询问用户是否要删除当前的待办事项
    if(window.confirm(
      `您确定要删除待办事项：${item.content} 吗？\n该项目当前的状态处于【${item.isCompleted ? "完成" : "未完成"}】`
    )){
      // 删除的逻辑
      const index = findItemIndex(item.content);

      if(index === -1) {
        return;
      }

      // 删除
      // 首先构建一个新的状态数组
      const newList = [
        ...todolist.slice(0, index),
        ...todolist.slice(index + 1)
      ];

      // 更新状态
      setTodoList(newList);
    }
  };

  // 修改待办事项的完成状态
  const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log("待办事项的状态被修改了", e.target.checked);
  };

  return (
    <div className={styles.item}>
      {/* 待办事项详情 */}
      <div>
        {/* 普通显示详情 */}
        <span>
          {/* 复选框 */}
          <input
            type="checkbox"
            className={styles.checkbox}
            checked={item.isCompleted}
            onChange={changeHandler}
            value={item.content}
          />
          {/* 待办内容 */}
          <span
            className={`${styles.pointer} ${
              item.isCompleted ? styles.del : ""
            }`}
          >
            {item.content}
          </span>
          {/* 发布时间 */}
          <span className={styles.time}>{item.time}</span>
        </span>
      </div>
      {/* 删除按钮 */}
      <div className={styles.close} onClick={() => closeHandler(item)}>
        X
      </div>
    </div>
  );
}

export default TodoItem;
